﻿/*
 * Copyright 2010 ITA Software, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Main styling options */
body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}
ul, ol {
    margin: 0;
    padding: 0;
}

/* Page header */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/* flot graphs get a high z-index, so to float above them we need to compensate */
	z-index: 5;
	background-color: #EEE;
}
#header ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 15pt;
	float: left;
}
#header ul li {
	display: inline;
	margin: 3px 0 3px 3px;
	padding: 0 20px;
	background-color: #DDD;
}
#header #title {
	font-weight: bold;
	padding: 0 5px;
}
#header #graph_options {
	float: right;
	padding-right: 5px;
	padding-top: 2px;
}
#link {
	right: 0.4em;
	top: 1.8em;
	position: fixed;
	z-index: 5;
}

/* General stuff */

/* Content and sidebars */
#content {
	margin: 10px;
	margin-left: 170px;
	padding-top: 18px;
}
.listheader {
	font-size: 12pt;
}
.pagination {
        text-align: center;
}
/* TODO: Finish this styling */
.biglist ul {
	margin: 0;
	padding-left: 15px;
	list-style: square;
	font-size: 10pt;
}
.biglist ul ul {
	font-size: 2pt;
}
#sidebar {
	float: left;
	width: 150px;
	padding: 18px 7px 10px 5px;
	margin-right: 10px;
	background-color: #EEE;
}

/* Status stoplight colors */
.green, .green a {
	color: green;
}
.green:hover, .green a:hover {
	color: limegreen;
}
.greenbg {
	background-color: lightgreen;
}
.yellow, .yellow a {
	color: yellow;
}
.yellowbg {
	background-color: yellow;
}
.red, .red a {
	color: red;
}
.redbg {
	background-color: tomato;
}

.collapse_row, .expand_row, .remove_row {
	width: 16px;
	height: 16px;
}
.collapse_row {
	background-image: url("/railroad-static/img/collapse.png");
}
.expand_row {
	background-image: url("/railroad-static/img/expand.png");
}
.remove_row {
	background-image: url("/railroad-static/img/remove.png");
}

.state_ok       { background-color: #BFB; }
.state_warning  { background-color: #FFB; }
.state_critical { background-color: #FF6347; }
.state_unknown  { background-color: #CCC; }

#graphs { border-collapse: collapse; }

td.controls { vertical-align: top }
td.controls div { margin-top: 3px; }
td.status_text { width: 500px; }
td.graph_container { width: 540px; }

/* Graph styling */
.graph {
	width: 500px;
	height: 225px;
	margin: 15px;
	margin-left: 25px;
	margin-top: 20px;
	font-size: 12pt;
}
.graph_container {
	font-size: 10pt;
}

.legend {
	position: absolute;
	top: 215px;
	background-color: #F8F8F8;
	width: 475px;
	text-transform: capitalize;
}
.legend table td {
	padding: 2px;
	border: 0;
}
.graph_container {
	position: relative;
}
.legend {
	position: relative;
	left: 50px;
	top: -7px;
}
.ylabel {
	position: relative;
	top: 250px;
	width: 200px;
	left: 10px;
	text-align: center;
	-o-transform: rotate(-90deg);
	-o-transform-origin: left;
	-moz-transform: rotate(-90deg);
	-moz-transform-origin: left;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: left;
	transform: rotate(-90deg);
	transform-origin: left;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	padding: 5px;
}
.ajax_info {
	position: absolute;
	top: -20px;
	right: 0;
}
.ajax_info, .options ul li {
	padding: 5px;
	margin-right: 5px;
	background-color: #F0F0F0;
	font-size: smaller;
}
.toggle, .update {
	display: inline;
}
.toggle, .options ul li {
	cursor: pointer;
}
.hidden {
	visibility: hidden;
}
.empty, .error {
	position: absolute;
	width: 100%;
	text-align: center;
}
.empty {
	top: 100px;
}
.error {
	top: 120px;
	color: red;
}

/* Service listings */
.service_row {
	padding-bottom: 10px;
    overflow: hidden;
}
.services td {
	padding: 5px;
	border-top: 1px solid lightgrey;
	border-bottom: 1px solid lightgrey;
}
.services h2 {
	font-size: 14pt;
	margin: 0;
    margin-right: 10px;
}
.services {
	font-size: 10pt;
}

/* Ajax Loading Throbber */
#loading {
    margin-left: 10px;
}
.filter {
	display: inline-block;
}
pre {
	font-size: 8pt;
}

/* Configurator */
#configurator {
    overflow: hidden;
}
fieldset {
    margin: 10px 3px;
}
#service_selector, #service_options {
       float: left;
       margin: 10px;
}
#configurator ul {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
    margin-left: 20px;
}
#configurator ul li {
    list-style: none outside none;
    margin: 0px;
    overflow: hidden;
}
#configurator ol li {
    list-style: none outside none;
    margin: 5px;
    overflow: hidden;
}
#configurator ol li label {
       width: 75px;
       float: left;
}
#configurator ol li input[type=text] {
       float: left;
       width: 400px;
}
/* Hints! */
.hint {
    display: none ;
    padding: 3px 20px 3px 3px;
    border: 1px solid #FC4;
    background-color: #FFB;
    color: #444;
    font-size: .7em;
    position: relative;
    width: 250px;
}
.hint:before { content: "Hint: ";}

.hide_hint {
    margin-left: 5;
    display: inline;
    position: absolute;
    right: 5px;
    color: #D32;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background-image: url("/railroad-static/img/remove.png");
}

/* Filtering */

.type select {
	/* Seems buggy in many browsers, doing in Python for now */
	text-transform: capitalize;
}

.filterform th {
        text-align: right;
        border-spacing: 1px 5px;
}

.filterform {
        border-spacing: 60px 5px;
}

.filters h3 {
        text-align: center;
}

.submit {
        text-align: center;
}

#debug {
    font-size: 0.6em;
    position: static;
    left: 10px;
    bottom: 10px;
}
